import './App.css'
import {Button, Input, Checkbox, Message, Space, Tag} from "@arco-design/web-react";
import "@arco-design/web-react/dist/css/arco.css";
import  {useEffect, useState} from "react";

const CheckboxGroup = Checkbox.Group;
const TextArea = Input.TextArea;

interface propListType {
    label: string;
    value: string;
    checked?: boolean;
}
const storageKey = {
    propList: 'propList',
    propCheckedList: 'propCheckedList',
    isRpx: 'isRpx'
}

// 复制到剪切板
const copyToClipboard = (text: string) => {
    const input = document.createElement('input')
    input.value = text
    document.body.appendChild(input)
    input.select()
    document.execCommand('copy')
    document.body.removeChild(input)
}

function App() {
    // 属性列表
    const [propList, setPropList] = useState<propListType[]>([]);
    const [propValue, setPropValue] = useState<string>('');
    const [propCheckedList, setPropCheckedList] = useState<propListType['value'][]>([]);
    const [originProp, setOriginProp] = useState<string>('');
    const [formatProp, setFormatProp] = useState<string>('');
    const [isRpx, setIsRpx] = useState(true)

    const handlePropChange = (value: string) => {
        setPropValue(value)
    }


    const handlePropAdd = () => {
        console.log(propCheckedList)
        if (!propValue) {
            Message.warning('请输入属性!');
            return
        }
        if (propList.some(item => item.value === propValue)) {
            Message.warning('属性已存在!');
            return
        }
        const curPropList = [...propList, {label: propValue, value: propValue}]
        setPropList(curPropList)
        setPropValue('')
        localStorage.setItem(storageKey.propList, JSON.stringify(curPropList))

        const curPropCheckedList = [...propCheckedList, propValue]
        setPropCheckedList(curPropCheckedList)
        localStorage.setItem(storageKey.propCheckedList, JSON.stringify(curPropCheckedList))

    }


    const handlePropFormat = () => {
        console.log(propCheckedList)
        if (!originProp) {
            Message.warning('请输入样式!');
            return
        }
        if (!propCheckedList.length) {
            Message.warning('请选择属性!');
            return
        }
        let formatValue = originProp
        // 删除/* 样式描述：色块 */
        formatValue = formatValue.replace(/\/\*.*?\*\//g, '')
        // 删除多余字符
        formatValue = formatValue.replace(/\s/g, '');
        // px直接替换rpx
        if (isRpx) {
            formatValue = formatValue.replace(/(\d+)px/g, '$1rpx')
        }
        // 从originProp获取选中的属性
        const result:string[] = []
        propCheckedList.forEach(item => {
            const reg = new RegExp(`${item}:([^;]+);`, 'g')
            const matchResult = formatValue.match(reg)
            if (matchResult) {
                result.push(matchResult[0])
            }
        })
        // 根据;分割样式
        if(result.length){
            formatValue = result.filter(item => item).join('\n')
            setFormatProp(formatValue)
            // 复制到剪切板
            copyToClipboard(formatValue)
            Message.success('复制成功')
        }
    }

    const handleOriginPropChange = (value: string) => {
        setOriginProp(value)
    }

    const handleRpxChange = (checked: boolean) => {
        setIsRpx(checked)
        localStorage.setItem(storageKey.isRpx, JSON.stringify(checked))
    }

    useEffect(() => {
        const propListStorage = localStorage.getItem(storageKey.propList)
        if (propListStorage) {
            setPropList(JSON.parse(propListStorage))
        }
        const propCheckedListStorage = localStorage.getItem(storageKey.propCheckedList)
        if (propCheckedListStorage) {
            setPropCheckedList(JSON.parse(propCheckedListStorage))
        }
        const isRpxStorage = localStorage.getItem(storageKey.isRpx)
        if (isRpxStorage) {
            setIsRpx(JSON.parse(isRpxStorage))

        }
    }, []);
    return (
        <>
            {/*是否开始px转rpx*/}
            <Checkbox checked={isRpx} onChange={handleRpxChange} style={{padding: '20px'}}>是否开始px转rpx</Checkbox>
            <CheckboxGroup
                onChange={(value) => {
                    setPropCheckedList(value)
                    localStorage.setItem(storageKey.propCheckedList, JSON.stringify(value))
                }}
                value={propCheckedList}
                style={{display: 'block', marginBottom: 20}}
            >
                {propList.map((item) => {
                    return (
                        <Checkbox key={item.value} value={item.value} >
                            {({checked}) => {
                                return (
                                    <Tag key={item.value} color={checked ? 'arcoblue' : ''} closable onClose={()=>{
                                        const curPropList = propList.filter(prop => prop.value !== item.value)
                                        setPropList(curPropList)
                                        localStorage.setItem(storageKey.propList, JSON.stringify(curPropList))
                                        const curPropCheckedList = propCheckedList.filter(prop => prop !== item.value)
                                        setPropCheckedList(curPropCheckedList)
                                        localStorage.setItem(storageKey.propCheckedList, JSON.stringify(curPropCheckedList))
                                    }}>
                                        {item.value}
                                    </Tag>
                                );
                            }}
                        </Checkbox>
                    );
                })}
            </CheckboxGroup>
            <div>
                <Space wrap>
                    <Input style={{width: 350}} allowClear placeholder='请输入属性' value={propValue}
                           onChange={handlePropChange}/>
                    <Button type="primary" onClick={handlePropAdd}>添加</Button>

                </Space>
            </div>
            <div style={{padding: '20px'}}>
                <Space wrap>
                    <TextArea placeholder='请输入样式' value={originProp} style={{minHeight: 500, width: 300}}
                              onChange={handleOriginPropChange}/>
                    <Button type="primary" onClick={handlePropFormat}>转换</Button>
                    <TextArea defaultValue='过滤后的样式' value={formatProp} style={{minHeight: 500, width: 300}} />
                </Space>
            </div>

        </>
    )
}

export default App
